<template>
    <div class="rejectionBox">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>驳回原因管理</el-breadcrumb-item>
        </el-breadcrumb>
        <span class="labelTit">驳回原因分类：</span>
        <el-select v-model="rejectReson" filterable >
                <el-option v-for="item in reasons"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                >
                </el-option>
        </el-select>
        <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="adddialog">新增</el-button>
        <el-table :data="tableData" v-loading="loading" border style="margin-top:15px;">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column  label="驳回原因分类" prop="rejectReason" align="center"></el-table-column>
            <el-table-column  label="内容" prop="content" align="center"></el-table-column>
            <el-table-column  label="操作人" prop="operatorName" align="center"></el-table-column>
            <el-table-column  label="操作时间" prop="updateTime" align="center" :formatter="initTime"></el-table-column>
            <el-table-column  label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteItem(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10,30,50,100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="margin-top:30px;">
         </el-pagination>
         <el-dialog :title="type=='add' ? '添加驳回原因分类' :'编辑驳回原因分类'   " :visible.sync="dialogVisible" width="40%">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                 <el-form-item label="驳回原因分类：" prop="categoryId">
                     <el-select v-model="ruleForm.categoryId" filterable>
                             <el-option v-for="item in rejectionRCs"
                                     :key="item.value"
                                     :label="item.value"
                                     :value="item.key"
                             >
                             </el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="内容：" v-for="(item,index) in ruleForm.contents" :key="index" :prop=" 'contents.' + index + '.content' " :rules="rules.content">
                     <el-input v-model.trim="item.content" placeholder="请输入" style="width:400px;" maxlength="25"></el-input>
                     <el-button type="primary" v-if="ruleForm.contents.length>1&&index!=0" @click="delContent(index)">删除</el-button>
                 </el-form-item>
                 <el-form-item >
                    <el-button type="primary" @click="addContent" v-if="type=='add'">新增</el-button>
                 </el-form-item>
                 <el-form-item >
                    <el-button type="primary" @click="confirmDialog">确定</el-button>
                    <el-button type="primary" @click="cancelDialog">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
    </div>
</template>

<script>
import utils from "../../../common/utils"
import api from '@/api/apiPath'
export default {
    title:'驳回原因管理',
    data(){
        return {
            editId:"",
            dialogVisible:false,
            type:"",
            reasons:[],
            rejectReson:0,
            pageNum:1,
            pageSize:10,
            total:0,
            tableData:[],
            loading:false,
            rejectionRCs:[],
            ruleForm:{
                categoryId:"",
                contents:[
                    {content:""}
                ]
            },
            rules:{
                categoryId:[
                    {required: true,message: '请输入驳回原因', trigger: 'blur'}
                ],
                content:[
                    {required: true,message: '请输入内容', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        initTime(row, column, cellValue, index){
            return utils.getTimeString(cellValue)
        },
        deleteItem(id){
            this.$confirm("确认删除该条记录？","提示",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.axios.get(api.deleteRejectionReason+"/"+id).then((res)=>{
                    if(res.data.code==200){
                        this.$alert("操作成功", '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.loadData();
                                 }
                        });
                    }else{
                        this.warn(res.data.msg);
                    }
                }).catch((error)=>{
                    console.log(error)
                })
            }).catch(()=>{})
        },
        edit(data){
            this.type="edit";
            this.dialogVisible=true;
            this.editId=data.id;
            this.ruleForm.categoryId=data.categoryId;
            this.ruleForm.contents=[{
                content:data.content
            }]
        },
        initType(row, column, cellValue, index){
            if(cellValue==0){return "客户跟进"}
        },
        loadList(){
          this.axios.get(api.rejectionCatoryList).then((res)=>{
              if(res.data.code==200){
                  let result=res.data.data;
                  this.rejectionRCs=JSON.parse(JSON.stringify(result));
                  this.reasons=result;
                  this.reasons.unshift({value:"全部",key:0});

              }
          }).catch((error)=>{
              console.log(error)
          })
        },
        warn(msg) {
            this.$alert(msg, '提示', {
                type: 'error',
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        },
        loadData(){
            let params={};
            params.id=this.rejectReson;
            params.pageNum=this.pageNum;
            params.pageSize=this.pageSize;
            this.loading=true;
            this.axios.post(api.rejectionReason,params).then((res)=>{
                if(res.data.code==200){
                    this.tableData=res.data.data.list;
                    this.total=res.data.data.total;
                    this.loading=false;
                }else{
                    this.warn(res.data.msg)
                }
            }).catch((error)=>{
                console.log(error)
            })
        },
        query(){
          this.pageNum=1;
          this.loadData();
        },
        adddialog(){
            this.dialogVisible=true;
            this.ruleForm.categoryId="";
            this.ruleForm.contents=[
                {content:""}
            ]
            this.type="add";
        },
        confirmDialog(){
            this.$refs.ruleForm.validate((valid)=>{
                if(!valid){
                        return
                }
                if(this.type=="add"){
                    let params={};
                    params.categoryId=this.ruleForm.categoryId;
                    params.contentArray=[];
                    for(let i=0;i<this.ruleForm.contents.length;i++){
                        params.contentArray.push(this.ruleForm.contents[i].content)
                    }
                    this.axios.post(api.addRejectionReason,params).then((res)=>{
                        if(res.data.code==200){
                            this.$alert("操作成功", '提示', {
                                    type: 'success',
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.dialogVisible=false;
                                        this.loadList();
                                        this.loadData();
                                     }
                            });
                        }else{
                            this.warn(res.data.msg);
                        }
                    }).catch((error)=>{
                        console.log(error);
                    })
                }else{
                    let params={};
                    params.id=this.editId;
                    params.categoryId=this.ruleForm.categoryId;
                    params.content=this.ruleForm.contents[0].content;
                    this.axios.post(api.updateRejectionReason,params).then((res)=>{
                        if(res.data.code==200){
                            this.$alert("操作成功", '提示', {
                                    type: 'success',
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.dialogVisible=false;
                                         this.loadData();
                                     }
                            });
                        }else{
                            this.warn(res.data.msg);
                        }
                    }).catch((error)=>{
                        console.log(error);
                    })
                }
            })
        },
        cancelDialog(){
            this.dialogVisible=false;
        },
        addContent(){
            let tempContent={content:""};
            this.ruleForm.contents.push(JSON.parse(JSON.stringify(tempContent)));
        },
        delContent(index){
            
            this.ruleForm.contents.splice(index,1);
        },
        handleSizeChange(val){
            this.pageSize=val;
            this.loadData();
        },
        handleCurrentChange(val){
            this.pageNum=val;
            this.loadData();
        },
    },
    mounted(){
        this.loadList();
        if(this.$route.query.id){
            this.rejectReason=this.$route.query.id
        }
        this.loadData();
    },
    activated(){
        this.query()
    }
}
</script>

<style lang="css" >
    .rejectionBox .labelTit{
        font-size: 14px;
    }
</style>
